<script lang="jsx" setup>
import { ref } from 'vue';
import Form from '@/components/common/form.vue';

const props = defineProps({
  rowData: {
    type: Object,
    default: () => null
  }
});

console.log('props.rowData:', props.rowData);

function getModal() {
  if (props.rowData) {
    const { eventName, eventType, eventTypeName, remark } = props.rowData;
    return { eventName, eventType, eventTypeName, remark };
  }
  return {
    eventName: null,
    eventType: null,
    eventTypeName: null,
    remark: null
  };
}

const model = ref(getModal());

const formList = [
  {
    type: 'tabs',
    name: '基本信息',
    span: 24
  },
  {
    type: 'input',
    key: 'eventName',
    label: '事件名称',
    placeholder: '请输入事件名称',
    span: 12
  },
  {
    type: 'select',
    key: 'eventType',
    label: '事件类型',
    placeholder: '请输入事件类型',
    span: 12,
    selectOptions: [
      {
        value: 1,
        label: '通知消息'
      },
      {
        value: 2,
        label: '预警消息'
      },
      {
        value: 3,
        label: '任务消息'
      }
    ],
    change() {
      model.value.eventTypeName = this.selectOptions.find(item => item.value === model.value.eventType).label;
    }
  },
  {
    type: 'textarea',
    key: 'remark',
    label: '备注',
    placeholder: '请输入备注',
    span: 24
  }
];

defineExpose({
  model: model.value
});
</script>

<template>
  <div class="event-form">
    <Form v-model:model="model" :form-list="formList"></Form>
  </div>
</template>

<style lang="scss" scoped></style>
